<template>
  <view class="exchange-page">
    <view class="page-header">
      <u-navbar
        title="积分兑换"
        :autoBack="true"
        bgColor="#fff"
      />
    </view>
    
    <view class="exchange-content">
      <!-- 积分信息 -->
      <view class="points-info">
        <view class="points-card">
          <view class="points-display">
            <u-icon name="heart-fill" color="#ff4757" size="48" />
            <view class="points-text">
              <text class="points-amount">{{ userInfo.points || 0 }}</text>
              <text class="points-label">可用积分</text>
            </view>
          </view>
          <view class="points-actions">
            <custom-button
              text="积分记录"
              type="secondary"
              size="small"
              @click="goToHistory"
            />
          </view>
        </view>
      </view>
      
      <!-- 兑换分类 -->
      <view class="category-tabs">
        <scroll-view scroll-x class="tab-scroll">
          <view 
            v-for="category in categories" 
            :key="category.id"
            class="tab-item"
            :class="{ active: currentCategory === category.id }"
            @click="switchCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </scroll-view>
      </view>
      
      <!-- 兑换商品列表 -->
      <view class="exchange-list">
        <view 
          v-for="item in filteredItems" 
          :key="item.id"
          class="exchange-item"
          @click="showExchangeModal(item)"
        >
          <image :src="item.image" class="item-image" mode="aspectFill" />
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-description">{{ item.description }}</text>
            <view class="item-price">
              <u-icon name="heart-fill" color="#ff4757" size="24" />
              <text class="price-text">{{ item.points }}积分</text>
            </view>
          </view>
          <view 
            class="exchange-btn" 
            :class="{ disabled: item.points > (userInfo.points || 0) }"
          >
            <text>兑换</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <empty-state
        v-if="filteredItems.length === 0"
        title="暂无兑换商品"
        description="敬请期待更多兑换商品"
        :show-button="false"
      />
    </view>
    
    <!-- 兑换确认弹窗 -->
    <modal
      :show="showExchangeModal"
      title="确认兑换"
      :show-footer="true"
      :confirm-loading="exchangeLoading"
      @close="closeExchangeModal"
      @confirm="confirmExchange"
    >
      <view class="exchange-confirm">
        <image :src="selectedItem.image" class="confirm-image" mode="aspectFill" />
        <view class="confirm-info">
          <text class="confirm-name">{{ selectedItem.name }}</text>
          <text class="confirm-description">{{ selectedItem.description }}</text>
          <view class="confirm-price">
            <u-icon name="heart-fill" color="#ff4757" size="32" />
            <text class="price-text">{{ selectedItem.points }}积分</text>
          </view>
        </view>
        <view class="confirm-notice">
          <u-icon name="info-circle" color="#ff9500" size="28" />
          <text>兑换后积分不可退回，请确认</text>
        </view>
      </view>
    </modal>
  </view>
</template>

<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import CustomButton from '@/components/custom-button/index.vue'
import EmptyState from '@/components/empty-state/index.vue'
import Modal from '@/components/modal/index.vue'

export default {
  name: 'PointsExchange',
  components: {
    CustomButton,
    EmptyState,
    Modal
  },
  data() {
    return {
      currentCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'food', name: '美食' },
        { id: 'gift', name: '礼品' },
        { id: 'discount', name: '优惠券' },
        { id: 'special', name: '特殊' }
      ],
      exchangeItems: [
        {
          id: 1,
          name: '情侣套餐券',
          description: '享受8折情侣套餐优惠',
          points: 500,
          image: '/static/images/exchange/coupon-1.png',
          category: 'discount'
        },
        {
          id: 2,
          name: '爱心蛋糕',
          description: '定制心形小蛋糕一个',
          points: 800,
          image: '/static/images/exchange/cake.png',
          category: 'food'
        },
        {
          id: 3,
          name: '浪漫玫瑰',
          description: '精美玫瑰花束',
          points: 1000,
          image: '/static/images/exchange/flower.png',
          category: 'gift'
        },
        {
          id: 4,
          name: '免费饮品券',
          description: '任意饮品一杯',
          points: 300,
          image: '/static/images/exchange/drink.png',
          category: 'discount'
        },
        {
          id: 5,
          name: '纪念日提醒',
          description: '提前3天提醒重要日子',
          points: 200,
          image: '/static/images/exchange/reminder.png',
          category: 'special'
        },
        {
          id: 6,
          name: '专属座位',
          description: '预留最佳情侣座位',
          points: 600,
          image: '/static/images/exchange/seat.png',
          category: 'special'
        }
      ],
      showExchangeModal: false,
      selectedItem: {},
      exchangeLoading: false
    }
  },
  computed: {
    ...mapState(useUserStore, ['userInfo']),
    filteredItems() {
      if (this.currentCategory === 'all') {
        return this.exchangeItems
      }
      return this.exchangeItems.filter(item => item.category === this.currentCategory)
    }
  },
  methods: {
    switchCategory(categoryId) {
      this.currentCategory = categoryId
    },
    
    goToHistory() {
      uni.navigateTo({ url: '/pages/points/history' })
    },
    
    showExchangeModal(item) {
      if (item.points > (this.userInfo.points || 0)) {
        uni.showToast({ title: '积分不足', icon: 'none' })
        return
      }
      this.selectedItem = item
      this.showExchangeModal = true
    },
    
    closeExchangeModal() {
      this.showExchangeModal = false
      this.selectedItem = {}
    },
    
    async confirmExchange() {
      this.exchangeLoading = true
      
      try {
        // 模拟兑换请求
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 更新用户积分
        this.$store.commit('user/UPDATE_USER_INFO', {
          points: this.userInfo.points - this.selectedItem.points
        })
        
        uni.showToast({
          title: '兑换成功',
          icon: 'success'
        })
        
        this.closeExchangeModal()
      } catch (error) {
        uni.showToast({
          title: '兑换失败',
          icon: 'none'
        })
      } finally {
        this.exchangeLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.exchange-page {
  min-height: 1334rpx;
  background: #f5f5f5;
}

.page-header {
  :deep(.u-navbar) {
    border-bottom: 1rpx solid #f5f5f5;
}
}

.exchange-content {
  padding: 24rpx;
}

.points-info {
  margin-bottom: 32rpx;
}

.points-card {
  background: linear-gradient(135deg, #ff4757, #ff3838);
  border-radius: 16rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.points-display {
  display: flex;
  align-items: center;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
}

.points-text {
  display: flex;
  flex-direction: column;
}

.points-amount {
  font-size: 48rpx;
  font-weight: bold;
}

.points-label {
  font-size: 24rpx;
  opacity: 0.8;
}

.category-tabs {
  margin-bottom: 32rpx;
}

.tab-scroll {
  white-space: nowrap;
}

.tab-item {
  display: inline-block;
  padding: 16rpx 32rpx;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  color: #666;
  
  &.active {
    background: #ff4757;
    color: #fff;
}
}

.exchange-list {
  display: flex;
  flex-direction: column;
   margin-right: 24rpx; &:last-child { margin-right: 0; }
}

.exchange-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  align-items: center;
   margin-right: 24rpx; &:last-child { margin-right: 0; }
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.item-description {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 16rpx;
}

.item-price {
  display: flex;
  align-items: center;
   margin-right: 8rpx; &:last-child { margin-right: 0; }
  
  .price-text {
    font-size: 28rpx;
    font-weight: bold;
    color: #ff4757;
}
}

.exchange-btn {
  background: #ff4757;
  color: #fff;
  padding: 16rpx 32rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  
  &.disabled {
    background: #ccc;
    color: #999;
}
}

.exchange-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40rpx;
}

.confirm-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.confirm-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.confirm-description {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 24rpx;
}

.confirm-price {
  display: flex;
  align-items: center;
  justify-content: center;
   margin-right: 8rpx; &:last-child { margin-right: 0; }
  margin-bottom: 32rpx;
  
  .price-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff4757;
}
}

.confirm-notice {
  display: flex;
  align-items: center;
   margin-right: 8rpx; &:last-child { margin-right: 0; }
  font-size: 24rpx;
  color: #ff9500;
  background: #fff7e6;
  padding: 16rpx;
  border-radius: 8rpx;
}
</style>